import { Button, Popconfirm } from 'antd'
import React from 'react'
import { TabCollection } from '../pages/workspace/workspaceAPI'
import style from './TabInfo.module.css'
import DefaultTabInfo from './DefaultTabInfo'

interface TabInfoFucProps {
  onDel: Function
  onSelect: Function
  onOpenModal: Function
}

const TabInfo = (props: TabCollection & TabInfoFucProps) => {
  const handleClickMoveBtn = () => {
    //确定选择的tabInfos
    props.onSelect(props.id)
    //确定打开Modal
    props.onOpenModal()
  }

  return (
    <DefaultTabInfo collection={props} tabDraggable={true}>

      <Button
        type="primary"
        ghost
        className={style.button}
        onClick={e => {
          handleClickMoveBtn()
        }}
      >
        移动集合
      </Button>
      <Popconfirm
        title="确定删除？"
        onConfirm={e => {
          //删除掉这个TabCollection
          props.onDel(props.id)
        }}
        okText="Yes"
        cancelText="No"
      >
        <Button
        type="primary"
        className={style.button}
      >删除集合</Button>
      </Popconfirm>
    </DefaultTabInfo>
  )
}

export default TabInfo
